[#ftl]
[@define "agile.BorderImageEditor","agile._MetadataEditor"]
[#assign templateString]
<table cellspacing="5px">
<tr>
	<td>
	 	<div data-dojo-type='agile.UploaderEditor' data-dojo-attach-point="borderImageSource" data-dojo-props='name:"borderImageSource",title:"please pick up an image",acceptedMIME:["jpg","gif","png"]'></div>
	</td>
	<td>
		<div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderImageSlice" data-dojo-props='options:"0,0%,fill",name:"borderImageSlice",width:"60px",placeHolder:"slice"'></div>
	</td>	
	<td>
		<div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderImageRepeat" data-dojo-props='options:"stretch,repeat,round",width:"60px",name:"borderImageRepeat",placeHolder:"repeat"'></div>
	</td>
	[#--not supported
	<td>
		<div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderImageWidth" options="0" unit="px" width="60px" name ="borderImageWidth"></div>
	</td>
	<td>
		<div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="borderImageOutset" options="0" unit="px" width="60px" name ="borderImageOutset" ></div>
	</td>			
	--]			
</tr>
</table>  
[/#assign]
templateString:"${templateString?js_string}"	
,init:function(){
	array.forEach(["borderImageSource","borderImageRepeat","borderImageSlice"],function(name){
		aspect.after(this[name],"onChange",lang.hitch(this,function(value){
			if(this.isValid()){
				this.onChange(this.get("value"));
			}
		}),true);
	},this);		
}	
,get:function(name){
	if(name == "value"){
	
		var value = "";
		if(this.borderImageSource.get("value") == ""){
			return "";
		}
		
		value += this.borderImageSource.get("value")+" ";		
		
		if(this.borderImageSlice.get("value") != ""){
			value += this.borderImageSlice.get("value") +" ";
		}else{
			value += "100% ";
		}
		
		if(this.borderImageRepeat.get("value") == ""){
			value += "stretch";
		}else{
			value += this.borderImageRepeat.get("value");
		}		
		return value.trim();
	}
	return this.inherited(arguments);
}
,set:function(name,value){
	if(name == "value"){	
//		//console.log("*****set value["+value+"]");
		if(value && value != ""){
			var v = value.split(" ");
			this.borderImageSource.set("value",v[0] == null?"":v[0]);			
			this.borderImageSlice.set("value",v[1] == null?"":v[1]);			
			this.borderImageRepeat.set("value",v[2] == null?"":v[2]);								
		}else{						
			this.borderImageSource.set("value","");			
			this.borderImageSlice.set("value","");			
			this.borderImageRepeat.set("value","");
		}
	}else if(name == "disabled" || name == "readOnly"){
		this.borderImageSource.set(name,value);			
		this.borderImageSlice.set(name,value);			
		this.borderImageRepeat.set(name,value);
	}else{
		this.inherited(arguments);
	}
}
,reset1:function(name,value){
	if(name == "value"){
	//	//console.log("*****reset1 value["+value+"]");
		if(value && value != ""){
			var v = value.split(" ");
			this.borderImageSource.reset1("value",v[0] == null?"":v[0]);			
			this.borderImageSlice.reset1("value",v[1] == null?"":v[1]);			
			this.borderImageRepeat.reset1("value",v[2] == null?"":v[2]);								
		}else{						
			this.borderImageSource.reset1("value","");			
			this.borderImageSlice.reset1("value","");			
			this.borderImageRepeat.reset1("value","");
		}
	}else{
		this.inherited(arguments);
	}
}
,isValid:function(){	
	return this.borderImageSource.isValid() && this.borderImageRepeat.isValid() && this.borderImageSlice.isValid();	
}
[/@] 
